/* vue */
import { Component } from 'vue-property-decorator'
import { CreateElement } from 'vue'
/* enum */
import ComponentNameEnum from '@model/enum/ComponentNameEnum'
import { RuleTypeEnum } from '@src/modules/task/components/AllotRuleModal/AllotRuleModalModel'
/* scss */
import '@src/modules/task/components/AllotRuleModal/AllotRuleModal.scss'
/* render */
import AllotRuleModalRender from '@src/modules/task/components/AllotRuleModal/AllotRuleModalRender.tsx'
import i18n from '@src/locales'

@Component({
  name: ComponentNameEnum.AllotRuleModal
})
export default class AllotRuleModal extends AllotRuleModalRender {
  
  mounted() {
    this.fetchEnabledFields()
  }
  
  render(h: CreateElement) {
    const attrs = this.getAttributes() 
    
    return (
      <base-window unique={false} top size='large' id={this.className} show={this.showAllotRuleModal} {...attrs}>
        <el-form ref='form' model={this.form} label-position='left'>
          
          <el-form-item label={`${i18n.t('common.base.name')}：`} required>
            <el-input
              disabled={this.isDisabled}
              placeholder={`${i18n.t('common.base.rulerName')} [${i18n.t('task.components.allotRuleModal.maxWords', {max: i18n.t('common.base.number10')})}]`}
              value={this.form.name} 
              onInput={(value: string) => this.handlerNameChange(value)}  
              maxlength={10}
            />
          </el-form-item>
          
          <el-form-item label={`${i18n.t('task.components.allotRuleModal.ruleType')}：`} required>
            <el-radio-group disabled={this.isDisabled} value={this.form.type} onInput={(value: RuleTypeEnum) => this.handlerTypeChange(value)}>
              <el-radio label={RuleTypeEnum.Type}>{i18n.t('task.components.allotRuleModal.byTaskType')}</el-radio>
              <el-radio label={RuleTypeEnum.Select}>{i18n.t('task.components.allotRuleModal.bySpecialCondition')}</el-radio>
              <el-radio label={RuleTypeEnum.Tag}>{i18n.t('task.components.allotRuleModal.byCustomerTag')}</el-radio>
              <el-radio label={RuleTypeEnum.Service}>{i18n.t('task.components.allotRuleModal.byServiceAddress')}</el-radio>
            </el-radio-group>
            {this.renderAllotType()}
          </el-form-item>

          {
            this.isServiceFormType && (
              <el-form-item label={`${i18n.t('task.detail.components.assignTo')}：`} required>
                { this.renderAllotServiceGroup() }
              </el-form-item>
            )
          }

          {
            !this.isServiceFormType && (
              <el-form-item label={`${i18n.t('task.detail.components.assignTo')}：`} required>
                { this.renderAllotGroup() }
              </el-form-item>
            )
          }

          {
            this.isShowUserState && (
              <el-form-item label={`${i18n.t('task.components.allotRuleModal.userState')}：`} class={`${this.className}-schedule-plan-item`}>
                {this.renderUserState()}
              </el-form-item>
            )
          }

          {
            this.isShowSchedulePlan && (
              <el-form-item label={`${i18n.t('task.components.allotRuleModal.shiftInfo')}：`} class={`${this.className}-schedule-plan-item`}>
                {this.renderSchedulePlan()}
              </el-form-item>
            )
          }

          {
            this.showDeliveryTime && (
              <el-form-item label={`${i18n.t('task.components.allotRuleModal.allotTimeRule')}：`} required>
              {this.renderScheduleStandard()}
              </el-form-item>
            )
          }
          
          {
            !this.isCustomerManager && (
              <el-form-item label={`${i18n.t('task.components.allotRuleModal.allotPriority')}：`} required>
                {this.renderAllotOrder()}
              </el-form-item>
            )
          }
          
        </el-form>
        
        <div slot='footer' class='dialog-footer'>
          <el-button onClick={() => this.close()}>
            {i18n.t('common.base.close')}
          </el-button>
          {this.renderConfirmButton()}
        </div>
        
      </base-window>
    )
  }
  
}

